<template>
  <div class="layout-container">
    <!-- 1. 左侧公共菜单（复用你现有的 MainMenu 组件） -->
    <MainMenu /> 

    <!-- 2. 右侧内容区（包含 Header + 动态内容 + Footer） -->
    <div class="content-wrapper">
      <!-- 公共顶部导航（复用你的 Header 组件，比如包含登录用户信息、退出按钮） -->
      <Header /> 

      <!-- 3. 动态内容出口：家长/学生/管理员的页面内容在这里渲染 -->
      <main class="content">
        <router-view></router-view> <!-- 关键：中间内容会替换这里 -->
      </main>

      <!-- 公共底部（复用你的 Footer 组件，比如版权信息） -->
      <Footer /> 
    </div>
  </div>
</template>

<script>
// 导入公共组件（路径根据你实际项目调整，确保能找到 Header/Menu/Footer）
import Header from './Header.vue'
import MainMenu from './Menu.vue'
import Footer from './Footer.vue'

export default {
  name: 'CommonLayout',
  components: {
    Header,
    MainMenu,
    Footer
  }
}
</script>

<style scoped lang="scss">
/* 布局样式：左侧菜单固定，右侧内容自适应 */
.layout-container {
  display: flex;
  height: 100vh; /* 占满屏幕高度 */
}

.content-wrapper {
  flex: 1; /* 右侧内容区占满剩余宽度 */
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 内容超出时滚动 */
}

.content {
  flex: 1; /* 内容区占满中间高度 */
  padding: 20px; /* 内边距，避免内容贴边 */
  background-color: #f5f7fa; /* 背景色，和你的系统风格统一 */
}
</style>